import * as React from 'react';
import {observer} from 'mobx-react';
import {Form, InputNumber} from 'antd';

const FormItem = Form.Item;

interface InputNumberBean{
    store: any; 
    myKey: string; 
    title: string; 
    max: number;
    min: number; 
    labelCol: any;
    wrapperCol:any;
}

@observer
export class InputNumberItem extends React.Component<InputNumberBean,any> {
    render() {
        const { myKey, title, store, max, min, labelCol, wrapperCol} = this.props;
        const item = store.fields[myKey];
        const value = (item.value === null) ? undefined : item.value;

        return (
            <FormItem
                label={title}
                labelCol={labelCol}
                wrapperCol={wrapperCol}
                hasFeedback = {item.hasFeedback}
                required = {item.required}
                help = {item.help}
                validateStatus = {item.validateStatus}>
                <InputNumber
                    style={{width:'100%'}}
                    value={value}
                    onChange={(value)=> {
                        store.asyncValid(myKey, value, !item.required)
                    }}
                    max= {max}
                    min= {min}
                />
            </FormItem>
        )
    }
}